<template>
  <view class="index_container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <!-- 收集卡片 -->
    <view class="collect_card">
      <view class="card_title"> 以獲得 <text>8</text> 枚 </view>

      <u-row style="flex-wrap: wrap; margin-top:12rpx" justify="space-between" gutter="10">
        <u-col span="3">
          <img :src="'./static/demo/tea_active.png'" alt="" />
        </u-col>
        <u-col span="3">
          <img :src="'./static/demo/tea_active.png'" alt="" />
        </u-col>
        <u-col span="3">
          <img :src="'./static/demo/tea_active.png'" alt="" />
        </u-col>
        <u-col span="3">
          <img :src="'./static/demo/tea_active.png'" alt="" />
        </u-col>
        <u-col span="3">
          <img :src="'./static/demo/tea_active.png'" alt="" />
        </u-col>
        <u-col span="3">
          <img :src="'./static/demo/tea_active.png'" alt="" />
        </u-col>
        <u-col span="3">
          <img :src="'./static/demo/tea.png'" alt="" />
        </u-col>
         <u-col span="3">
          <img :src="'./static/demo/tea.png'" alt="" />
        </u-col>
      </u-row>
    </view>

    <!-- 活動說明卡片 -->
    <view class="activity_card">
        <view class="card_title">  活動説明</view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl";
import fNavbar from "@/components/module/f-navbar/f-navbar";
import fTabbar from "@/components/module/f-tabbar/f-tabbar";

export default {
  components: {
    fNavbar,
    fTabbar,
  },
  computed: {
    ...mapState(["PrimaryColor", "userInfo"]),
    freeSpecsButtonBackground() {
      return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
    },
  },
  data() {
    return {
      baseUrl: base.baseUrl,
      systemInfo: base.systemInfo,
    };
  },
  onLoad() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
  },
  methods: {
    ...mapMutations(["setLoginPopupShow"]),
  },
  onPageScroll(e) {},
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: rgba(243, 243, 243, 1);
  padding: 26.163rpx;
}

.index_container {
  padding: 17.442rpx;
  background: linear-gradient(
    360deg,
    #f3f3f3 51.95%,
    #dcdcdc 86.09%,
    #b5b5b5 100%
  );
  height: 100%;
  //   padding: 26.163rpx;
}

.collect_card {
  width: 664.535rpx;
  height: 397.674rpx;
  border-radius: 17.442rpx;
  background: rgba(255, 255, 255, 1);

  padding: 34.884rpx;

  
}

.card_title {
    font-family: "Microsoft Yi Baiti";
    font-size: 34.884rpx;
    font-weight: 400;

    text {
      color: rgba(247, 154, 77, 1);
      margin-left: 12rpx;
      margin-right: 12rpx;
      font-size: 50rpx;
      font-weight: 400;
    }
  }
.activity_card {
    border-radius: 17.442rpx;
  background: rgba(255, 255, 255, 1);

  padding: 34.884rpx;
  height: 1039.535rpx;
  width: 664.535rpx;
  margin-top: 20rpx;
}
</style>
